<template>
  <div class="container">
    <div class="header">
      <h1>常见问题</h1>
      <div class="back" @click="handleBack">
        <img src="@/assets/images/back.png" alt="" />
      </div>
    </div>
    <div class="main" v-loading="loading" ref="main_container">
      <div class="item" v-for="item in list" :key="item.id">
        <div class="question">
          <p>问：</p>
          <div>{{ item.title }}</div>
        </div>
        <div class="clearfix"></div>
        <div class="answer">
          <p>答：</p>
          <div>{{ item.newcontent }}</div>
        </div>
      </div>
      <div class="no_data" v-if="list.length == 0">
        <i class="el-icon-warning-outline"></i>
        <p>暂无数据</p>
      </div>
    </div>
    <div class="left_fixed">
      <div class="item" @click="handleUp">
        <img src="@/assets/images/up.png" alt="" />
      </div>
      <div class="item" @click="handleDown">
        <img src="@/assets/images/down.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
import { parseTime, handleScrollup, handleScrolldown } from "@/utils/index";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";

import { get_use_manual } from "@/api/index";
export default {
  data() {
    return {
      handleScrolldown,
      handleScrollup,
      list: [],
      loading: false,
    };
  },
  methods: {
    handleUp() {
      let el = "";
      el = this.$refs.main_container;

      this.handleScrollup(el);
    },
    handleDown() {
      let el = "";
      el = this.$refs.main_container;
      this.handleScrolldown(el);
    },
    get_use_manual() {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { type: 2 }
      );
      get_use_manual(data).then((res) => {
        if (res.errcode == 0) {
          this.loading = false;
          res.data.map((e) => {
            e.newcontent = "";
            if (e.content) {
              let newcontent = e.content.replace(/<[^>]+>/g, "");
              e.newcontent = newcontent;
            }
          });
          this.list = res.data;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    handleBack() {
      this.$router.back(-1);
    },
  },
  created() {
    this.loading = true;
    this.get_use_manual();
  },
};
</script>

<style lang="scss" scoped>
.container {
  height: 100vh;
  width: 100%;
  background-color: #f1f0f5;
  position: relative;
}
.header {
  width: 100%;
  height: 0.8125rem;
  background-color: #4fa388;
  box-shadow: 0px 0px 6px 0px rgba(11, 3, 6, 0.08);
  text-align: center;
  line-height: 0.8125rem;
  position: relative;
  h1 {
    font-size: 0.25rem;
    font-family: PingFang SC;
    font-weight: 400;
    color: #ffffff;
  }
  .back {
    position: absolute;
    right: 0.25rem;
    top: 0.1rem;
    img {
      width: 0.6625rem;
    }
  }
}
.main {
  height: calc(100vh - 0.8125rem);
  overflow: auto;
  padding-left: 1.0125rem;
  padding-right: 1.5rem;
  padding-top: 0.375rem;
  padding-bottom: 0.625rem;
  .item {
    .question,
    .answer {
      background: #fff;
      box-shadow: 0px 0px 6px 0px rgba(11, 3, 6, 0.27);
      border-radius: 0.2rem;
      padding: 0.25rem 0.25rem;
      margin-bottom: 0.375rem;
      display: inline-flex;
      flex-direction: row;
      align-items: flex-start;
      font-size: 0.275rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #676767;
      p {
        color: #4fa388;
        display: inline-block;
      }
      div {
        display: inline-block;
      }
    }
  }
}

.left_fixed {
  position: fixed;
  bottom: 0.75rem;
  right: 0.625rem;
  width: 0.625rem;
  display: flex;
  flex-direction: column;

  .item {
    width: 0.9375rem;
    height: 0.8rem;
    background: #ffffff;
    box-shadow: 0px 0px 6px 0px rgba(11, 3, 6, 0.27);
    border-radius: 0.2875rem;
    margin-bottom: 0.175rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

// 暂无数据
.no_data {
  text-align: center;
  padding-top: 0.3125rem;
  padding-bottom: 0.3125rem;

  .el-icon-warning-outline {
    font-size: 0.45rem;
    font-family: PingFang SC;
    font-weight: 400;
    color: #303030;
    line-height: 0.475rem;
  }

  p {
    font-size: 0.25rem;
    font-family: PingFang SC;
    font-weight: 400;
    color: #303030;
    line-height: 0.475rem;
  }
}
</style>